<template>
  <div>
    <el-table v-loading="loading" :data="taskList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="任务名称" align="center" prop="taskName" :show-overflow-tooltip="true" />
      <el-table-column label="任务描述" align="center" prop="description" :show-overflow-tooltip="true" />
      <el-table-column label="优先级" align="center" prop="priority">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.priority == 0" type="info">低</el-tag>
          <el-tag v-else-if="scope.row.priority == 1" type="warning">中</el-tag>
          <el-tag v-else-if="scope.row.priority == 2" type="danger">高</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="截止时间" align="center" prop="dueDate" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.dueDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="负责人" align="center" prop="assigneeName" />
      <el-table-column label="任务状态" align="center" prop="status">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == 0" type="info">待接收</el-tag>
          <el-tag v-else-if="scope.row.status == 1" type="warning">进行中</el-tag>
          <el-tag v-else-if="scope.row.status == 2" type="success">已完成</el-tag>
          <el-tag v-else-if="scope.row.status == 3" type="danger">异常</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleViewDetail(scope.row.taskId)"
          >详情</el-button>
          
          <!-- 待接收任务显示接收按钮 -->
          <el-button
            v-if="showAcceptButton && scope.row.status == 0"
            size="mini"
            type="text"
            icon="el-icon-check"
            @click="handleAcceptTask(scope.row.taskId)"
          >接收</el-button>
          
          <!-- 进行中任务显示状态更新按钮 -->
          <el-dropdown v-if="showStatusButton && scope.row.status == 1" @command="(command) => handleUpdateStatus(scope.row.taskId, command)">
            <el-button size="mini" type="text">
              更新状态<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="2">完成</el-dropdown-item>
              <el-dropdown-item command="3">异常</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="$emit('pagination')"
    />
  </div>
</template>

<script>
export default {
  name: "TaskTable",
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    taskList: {
      type: Array,
      default: () => []
    },
    total: {
      type: Number,
      default: 0
    },
    queryParams: {
      type: Object,
      default: () => ({})
    },
    showAcceptButton: {
      type: Boolean,
      default: false
    },
    showStatusButton: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    /** 多选框选中数据 */
    handleSelectionChange(selection) {
      this.$emit('selection-change', selection)
    },
    
    /** 接收任务 */
    handleAcceptTask(taskId) {
      this.$emit('accept-task', taskId)
    },
    
    /** 更新任务状态 */
    handleUpdateStatus(taskId, status) {
      this.$emit('update-status', taskId, status)
    },
    
    /** 查看详情 */
    handleViewDetail(taskId) {
      this.$emit('view-detail', taskId)
    }
  }
}
</script>